<template>
  <div class="header clearfix">
    <h2>{{ route.meta.title }}</h2>
    <el-button type="primary">用户购买记录</el-button>
  </div>

  <div class="content">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
      :header-cell-style="{ backgroundColor: '#D7D7D7' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="coupon_type" label="区域" width="120"></el-table-column>
      <el-table-column property="coupon_name" label="卡劵名称" width="160">
        <template v-slot="scope">
          <el-input v-model="scope.row.coupon_name" style="width:80%" />
        </template>
      </el-table-column>
      <el-table-column property="time" label="时间跨度" width="220"></el-table-column>
      <el-table-column property="coupon_money" label="现价" width="120"></el-table-column>
      <el-table-column property="coupon_state==0 ? '已停售' : '售卖中'" label="状态" width="220">
        <template v-slot="scope">
          <span :class="{ activeRed: scope.row.coupon_state == 0, activeGreen: scope.row.coupon_state == 1 }">
            {{ scope.row.coupon_state == 0 ? '停止售卖' : '售卖中' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="修改价格" width="120">
        <template v-slot="scope">
          <el-input v-model="scope.row.coupon_changeMoney" style="width:80%" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="changeState(scope.row.coupon_id, scope.row.coupon_state)"
            :type="scope.row.coupon_state == 0 ? 'success' : 'danger'" text size="small">
            {{ scope.row.coupon_state == 0 ? '继续恢复售卖' : '点击停止售卖' }}
          </el-button>
          <el-button type="info" text size="small" @click="delBtn(scope.row.coupon_id)">删除</el-button>
          <el-button @click="save(scope.row.coupon_id, scope.row.coupon_name, scope.row.coupon_changeMoney)"
            type="primary" text size="small">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- footer -->
    <div class="footer">
      <el-button type="info" size="small">批量删除</el-button>
      <el-button type="danger" size="small">批量恢复购买</el-button>
      <el-button type="success" size="small">批量停止售卖</el-button>
      <el-button @click="dialogFormVisible = true" type="primary" size="small">添加新的卡卷</el-button>
    </div>
  </div>
  <!-- 添加卡劵 -->
  <el-dialog v-model="dialogFormVisible" title="添加卡券">
    <el-form :model="form">
      <div class="boxform">
        <el-form-item label="区域" label-width="140px">
          <el-select v-model="form.coupon_type" placeholder="请选择区域">
            <el-option label="单人区" value="单人区" />
            <el-option label="双人区" value="双人区" />
          </el-select>
        </el-form-item>
        <el-form-item label="卡劵名称" label-width="140px">
          <el-input v-model="form.coupon_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="现价" label-width="140px">
          <el-input v-model="form.coupon_money" autocomplete="off" />
        </el-form-item>
      </div>
      <div class="boxRadio">
        <el-radio-group v-model="form.coupon_state" class="ml-4">
          <el-radio :label="1" size="large">售卖中</el-radio>
          <el-radio :label="0" size="large">停止售卖</el-radio>
        </el-radio-group>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { useRoute } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'
import axios from '../../utils/http'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const { log } = console
    const route = useRoute()
    const data = reactive({
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        coupon_name: '',
        coupon_money: '',
        coupon_state: 1,
        coupon_type: ''
      },
      tableData: [],
      // 方法 
      getData: () => {
        axios({
          url: '/getCoupon',
          method: 'get'
        })
          .then((res) => {
            if (res.data.code == 200) {
              data.tableData = res.data.data
              data.tableData.map(v => v.changeMoney = '')
            }
          })
          .catch(() => ElMessage.error('获取失败'))
      },//获取所有卡劵
      changeState: (coupon_id, coupon_state) => {
        axios({
          url: '/updateCouponState',
          method: 'post',
          data: {
            coupon_id,
            coupon_state
          }
        })
          .then((res) => {
            if (res.data.data.affectedRows > 0) {
              data.getData()
              ElMessage({
                showClose: true,
                message: res.data.msg,
                type: 'success',
              })
            }
          })
          .catch(() => ElMessage.error('获取失败'))
      },//修改售卖状态
      handleSelectionChange(arr) {
        console.log(arr);
      },
      delBtn(num) {
        axios({
          url: '/deleteCouponRow',
          method: 'post',
          data: {
            coupon_id: num
          }
        })
          .then((res) => {
            if (res.data.data.changedRows > 0) {
              data.getData()
              ElMessage({
                showClose: true,
                message: res.data.msg,
                type: 'success',
              })
            }
          })
          .catch(() => ElMessage.error('获取失败'))
      },
      save(coupon_id, coupon_name, changeMoney) {
        axios({
          url: '/updateCouponData',
          method: 'post',
          data: {
            coupon_id,
            coupon_name,
            coupon_money: changeMoney
          }
        })
          .then((resp) => {
            if (resp.data.data.changedRows > 0) {
              data.getData()
              ElMessage({
                showClose: true,
                message: resp.data.msg,
                type: 'success',
              })
            }
          })
          .catch(() => ElMessage.error('保存失败'))
      },//保存
      confirm() {
        const form = data.form
        axios({
          url: '/addCoupon',
          method: 'post',
          data: {
            ...form
          }
        })
          .then((resp) => {
            if (resp.data.data.affectedRows > 0) {
              data.getData()
              data.dialogFormVisible = false
              data.form.coupon_money = ''
              data.form.coupon_name = ''
              data.form.coupon_state = ''
              data.form.coupon_type = ''
              ElMessage({
                showClose: true,
                message: resp.data.msg,
                type: 'success',
              })
            }
          })
          .catch(() => ElMessage.error('获取失败'))
      }//添加卡劵
    })
    onMounted(() => {
      data.getData()
    })
    return { ...toRefs(data), route }
  },//setup结束花括号
}
</script>

<style lang="scss" scoped>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

* {
  margin: 0;
  padding: 0;
}

.el-table {
  margin-top: 2%;
}

.header {
  h2 {
    display: inline-block;
    font-size: 18px;
  }

  .el-button {
    float: right;
    padding: 10px;
  }
}

.activeRed {
  color: red;
  font-size: 12px;
}

.activeGreen {
  color: #42B783;
  font-size: 12px;
}

.footer {
  margin-top: 1%;

  .el-button {
    padding: 10px;
  }
}




.el-dialog>.el-form {
  text-align: center;
}

// ---------------------------------------

.boxform {
  width: 80%;
  text-align: center;
  margin: 0 auto;

  .el-form-item:nth-child(2) {
    margin: 20px 0;
  }
}



.boxRadio {
  text-align: center;
  margin-top: 20px;
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer {
  width: 100%;
  display: inline-block;
  text-align: center;
  transform: translateY(-20px);
}

.dialog-footer button:first-child {
  padding: 10px;
  margin-right: 10px;
}

.dialog-footer button:nth-child(2) {
  padding: 10px;
}
</style>